<!--
 * @Description:
 * @Author: liyujie
 * @Date: 2021/12/22
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/12/22
-->
<template>
    <section class="wrapper">
        <draggable
            class="type-list"
            v-model="typeList"
            :sort="false"
            :group="{ name: 'template', pull: 'clone', put: true }"
            :clone="addType"
        >
            <div
                v-for="item in typeList"
                :key="item.id"
                class="type-item"
                :class="`type-item-${item.type}`"
                @click="addType(item, 'click')"
            >
                <div class="type-item__title">
                    {{ item.title }}
                </div>
                <div class="type-item__icon">
                    <i class="el-icon-circle-plus"/>
                </div>
            </div>
        </draggable>
        <div class="content-wrapper">
            <draggable
                class="module-list"
                tag="div"
                v-model="moduleList"
                v-bind="dragOptions"
                :clone="removeType"
            >
                <div
                    v-for="item in moduleList"
                    :key="item.id"
                    class="module-item"
                    :class="`module-item-${item.type}`"
                >
                    <!--文本类型-->
                    <template v-if="item.type === 1">
                        <module-text v-model="item.data"/>
                    </template>
                    <!--数据指标类型-->
                    <template v-if="item.type === 2">
                        <module-data v-model="item.data"/>
                    </template>
                    <!--任务执行趋势图类型-->
                    <template v-if="item.type === 3">
                        其他组件
                    </template>
                    <!--任务执行趋势图类型-->
                    <template v-if="item.type === 4">
                        其他组件
                    </template>
                    <!--任务执行趋势图类型-->
                    <template v-if="item.type === 5">
                        其他组件
                    </template>
                    <!--任务执行趋势图类型-->
                    <template v-if="item.type === 6">
                        其他组件
                    </template>
                </div>
            </draggable>
        </div>
    </section>
</template>

<script>
import Draggable from "vuedraggable";
import typeList from './module.type';
import { uuid } from "@/utils";
import ModuleText from "./components/module-text";
import ModuleData from "./components/module-data";

export default {
    name: 'Template',
    components: {
        Draggable,
        ModuleData,
        ModuleText,
    },
    data() {
        return {
            // 类型列表
            typeList,
            // 内容列表
            moduleList: [],
            // 拖拽配置项
            dragOptions: {
                animation: 200,
                group: "template",
                disabled: false,
                ghostClass: "ghost",
            },
        };
    },
    computed: {},
    mounted() {
    },
    methods: {
        /**
         * 拖拽克隆
         * @param typeItem
         * @param type
         * @returns {*&{id: string}}
         */
        addType(typeItem, type = 'drag') {
            if (this.moduleList.find(item => item.type === typeItem.type)) {
                this.$message.warning('已存在相同模块');
                return;
            }

            if (type === 'click') {
                this.moduleList.push({
                    ...typeItem,
                    id: uuid()
                });
            }

            return {
                ...typeItem,
                id: uuid()
            };
        },

        /**
         * 移除
         * @param typeItem
         */
        removeType(typeItem) {
            console.log(typeItem);
        }
    }
};
</script>

<style scoped lang="scss">
@import "template.style";
</style>
